/* ---------- Stili SCHEDA PRODOTTI creato da Cristian ---------- */

    .full-width-section {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
    
    .inner-content {
        max-width: 1200px;
        margin: 0 auto;
        padding: 60px 20px;
    }
        
    /* Contenitore principale Flexbox */
    .responsive-flex-container {
        display: flex;
        flex-direction: row; /* Allineamento orizzontale di base (Desktop) */
        align-items: center; /* Allinea verticalmente testo e immagine al centro */
        width: 100%;
    } 
    
    /* Box Testo: occupa i 2/3 (66.66%) dello spazio disponibile */
    .box-text {
        flex: 2; 
        min-width: 0;        /* Trucco CSS fondamentale: impedisce al testo di forzare l'allargamento del box e lo costringe ad andare a capo */
        word-wrap: break-word; /* Spezza le parole eccessivamente lunghe se necessario */
    }

    /* Box Immagine: occupa 1/3 (33.33%) dello spazio disponibile */
    .box-image {
        flex: 1;
        text-align: center;
    }

    /* Gestione dell'immagine dentro il suo box */
    .box-image img {
        width: 100%;         /* Prende tutta la larghezza del suo box (1/3) */
        height: auto;        /* Mantiene le proporzioni */
        max-width: 100%;
        border-radius: 8px;
        display: block;
    }
    
    /* MEDIA QUERY PER MOBILE (Schermi sotto i 768px) */
    @media (max-width: 768px) {
        .responsive-flex-container {
            flex-direction: column; /* Impila i box verticalmente */
        }

        .box-text, .box-image {
            width: 100%;            /* Entrambi i box occupano l'intera larghezza dello schermo mobile */
            flex: none;             /* Annulla le proporzioni 2/3 e 1/3 del desktop */
        }
    }
    
    /* Il contenitore che racchiude tutti i box */
    .cards-flex-container {
        display: flex;
        flex-direction: row;      /* Dispone i box in orizzontale di base */
        flex-wrap: wrap;          /* Permette ai box di andare a capo quando lo spazio finisce */
        gap: 24px;                /* Spazio (orizzontale e verticale) tra i vari box */
        width: 100%;
        max-width: 1200px;        /* Larghezza massima consigliata per il contenuto */
        margin: 0 auto;           /* Centra il contenitore nella pagina */
        box-sizing: border-box;
    }

    /* Il singolo Box (Card) */
    .card-item {
        /* flex: sopra desktop distribuisce lo spazio in parti uguali (es. 1/3 ciascuno se sono 3). 
           Il valore 280px è la larghezza minima sotto la quale il box decide di andare a capo */
        flex: 1 1 280px;          
        
        background-color: #ffffff;
        border: 1px solid #e0e0e0; /* Sottile bordo grigio chiaro */
        border-radius: 8px;       /* Angoli leggermente arrotondati */
        padding: 24px;            /* Spazio interno tra il bordo e il testo */
        
        /* Ombra delicata per staccare il box dallo sfondo */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); 
        
        box-sizing: border-box;
        transition: transform 0.2s ease, box-shadow 0.2s ease; /* Animazione fluida al passaggio del mouse */
    }

    /* Effetto opzionale: il box si solleva leggermente quando l'utente ci passa sopra con il mouse 
    .card-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
    }*/

    /* Stile dei testi all'interno del box */
    .card-item h3 {
        margin-top: 0;
        margin-bottom: 12px;
        color: #212529;
        font-size: 1.3rem;
    }

    .card-item p {
        margin: 0;
        color: #495057;
        font-size: 1rem;
        line-height: 1.6;
        text-align: justify;       /* Allinea il testo in modo GIUSTIFICATO */
        
        /* Proprietà fondamentali per fare in modo che il testo si adatti senza spaccare il box */
        word-wrap: break-word;     
        hyphens: auto;             /* Opzionale: inserisce il trattino di sillabazione se supportato dal browser */
    }


    /* Il singolo Box2 (Card2) */
    .card-item2 {
        /* flex: sopra desktop distribuisce lo spazio in parti uguali (es. 1/3 ciascuno se sono 3). 
           Il valore 280px è la larghezza minima sotto la quale il box decide di andare a capo */
        flex: 1 1 280px;          
        
        background-color: #ffffff;
        border: 1px solid #e0e0e0; /* Sottile bordo grigio chiaro */
        border-radius: 8px;       /* Angoli leggermente arrotondati */
        padding: 24px;            /* Spazio interno tra il bordo e il testo */
        box-sizing: border-box;
    }

    /* Stile dei testi all'interno del box */
    .card-item2 h3 {
        margin-top: 0;
        margin-bottom: 12px;
        color: #212529;
        font-size: 1.3rem;
    }

    .card-item2 p {
        margin: 0;
        color: #495057;
        font-size: 1rem;
        line-height: 1.6;
        text-align: justify;       /* Allinea il testo in modo GIUSTIFICATO */
        
        /* Proprietà fondamentali per fare in modo che il testo si adatti senza spaccare il box */
        word-wrap: break-word;     
        hyphens: auto;             /* Opzionale: inserisce il trattino di sillabazione se supportato dal browser */
    }


   /* Contenitore esterno per dare margine e centrare la sezione 
    .video-section-container {
        max-width: 800px; /* Imposta la larghezza massima desiderata per il video sul tuo sito 
        margin: 40px auto;
        padding: 0 20px;
        text-align: center;
    }

    .video-section-container h2 {
        margin-bottom: 20px;
        color: #212529;
    } */

    /* Il "trucco" CSS per mantenere la proporzione 16:9 fluida */
    .youtube-responsive-wrapper {
        position: relative;
        padding-bottom: 56.25%; /* Proporzione 16:9 (9 diviso 16 = 0.5625) */
        height: 0;
        overflow: hidden;
        border-radius: 8px; /* Angoli arrotondati per abbinarsi ai box precedenti */
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Ombra per staccarlo dallo sfondo */
        border: 1px solid #e0e0e0;
    }

    /* Forziamo l'iframe di YouTube a prendere tutto lo spazio del wrapper responsive */
    .youtube-responsive-wrapper iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }